<template>

    <p style="font-size: 20px;font-weight: 400;margin-bottom: 10px;">{{ $t(title) }}</p>

    <!-- 头部按钮 -->
    <div class="search-box">
        <div class="flex">
            <span style="width: 80px;">{{ $t('login.email') }}</span>
            <el-input v-model="search.searchValue1" clearable></el-input>
        </div>
        <div class="flex">
            <span style="width: 80px;">{{ $t('common.nickName') }}</span>
            <el-input v-model="search.searchName" clearable></el-input>
        </div>
        <el-button type="primary" @click="searchChange">{{ $t('data.search') }}</el-button>
    </div>

    <!-- 表格 -->

    <el-table :data="datas" stripe border style="height: 580px">
        <el-table-column prop="name" :label="$t('common.nickName')" align="center" />
        <el-table-column prop="email" :label="$t('login.email')" align="center" />
        <el-table-column :label="$t('common.avatar')" align="center">
            <template #default="scope">
                <el-avatar :src="api.show + scope.row.avatar"></el-avatar>
            </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('common.createTime')" align="center">
            <template #default="scope">
                {{ scope.row.createTime.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="roleName" :label="$t('role.role')" align="center">
            <template #default="scope">
                <el-tag type="success" v-if="scope.row.roleName == 'user'">{{ scope.row.roleName }}</el-tag>
                <el-tag type="primary" v-else>{{ scope.row.roleName }}</el-tag>

            </template>
        </el-table-column>
        <el-table-column prop="status" :label="$t('common.nickName')" align="center"><template #default="scope">
                <el-tag v-if="scope.row.status == 0" type="success">启用</el-tag>
                <el-tag v-else type="danger">停用</el-tag>

            </template>
        </el-table-column>
        <el-table-column prop="region" :label="$t('column.city')" align="center" />
        <el-table-column prop="description" :label="$t('column.description')" align="center" />
        <el-table-column fixed="right" :label="$t('column.operations')" align="center">
            <template #default="scope">
                <el-button v-if="isSetAdmin(scope.row.roleName)" type="primary" size="small"
                    @click="setAdmin(scope.row)">
                    设为管理员
                </el-button>
                <el-button v-if="isRemoveAdmin(scope.row.roleName)" type="default" size="small"
                    @click="removeAdmin(scope.row)">
                    取消管理员
                </el-button>

                <el-button
                    v-if="scope.row.status == 1 && !scope.row.roleName.includes('admin') && !scope.row.roleName.includes('super') || scope.row.status == 1 && role == 'superAd'"
                    type="success" size="small" @click="setStatus(scope.row)">
                    启用
                </el-button>
                <el-button
                    v-else-if="scope.row.status == 0 && !scope.row.roleName.includes('ad') && !scope.row.roleName.includes('super') || scope.row.status == 0 && role == 'superAd'"
                    type="danger" size="small" @click="setStatus(scope.row)">
                    停用
                </el-button>
            </template>
        </el-table-column>


    </el-table>

    <el-pagination style="padding-top: 30px;" background layout="total, sizes, prev, pager, next, jumper"
        :total="search.total" :page-sizes="[10, 30, 50, 100]" v-model:current-page="search.index"
        v-model:page-size="search.size" @size-change="pageChange" @current-change="pageChange" />
</template>


<script setup>
import { ref } from 'vue'
import api from './api'
import { ElMessage } from 'element-plus';


const title = ref("用户管理")
const datas = ref([])
const role = ref('')
api.getRole().then(res => {
    role.value = res
})
const search = ref({
    searchValue1: '',
    searchName: '',
    index: 1,
    size: 10,
    total: 0
})

const getUsers = () => {
    api.select(search.value).then(res => {
        if (res.success) {
            datas.value = res.datas
            search.value.total = res.total
        }
    })
}
getUsers()
const pageChange = (value) => {
    search.value.index = value
    getUsers()
}
const searchChange = () => {
    getUsers()
}

const isSetAdmin = (roleName) => {
    const regex = /ad/i;
    return role.value == 'superAd' && !regex.test(roleName)
}

const isRemoveAdmin = (roleName) => {
    const regex = /ad/i;
    return role.value == 'superAd' && roleName == 'admin'
}

const setAdmin = (row) => {
    api.setAdmin(row.id).then(res => {
        let type = 'error'
        if (res.success) {
            type = 'success'
            row.roleName = 'admin'
        }
        ElMessage({
            type: type,
            message: res.message
        })
    })
}

const removeAdmin = (row) => {
    api.removeAdmin(row.id).then(res => {
        let type = 'error'
        if (res.success) {
            type = 'success'
            row.roleName = 'user'
        }
        ElMessage({
            type: type,
            message: res.message
        })
    })
}

const setStatus = (row) => {
    api.setStatus(row.id).then(res => {
        let type = 'error'
        if (res.success) {
            type = 'success'
            if (row.status == 0) {
                row.status = 1
            } else {
                row.status = 0
            }
        }
        ElMessage({
            type: type,
            message: res.message
        })
    })

}


</script>


<style lang="scss">
.search-box {
    .flex {
        display: flex;
        justify-content: space-between;
        width: 180px;
        height: 30px;
        line-height: 30px;
        margin-right: 10px
    }
}
</style>